<template>
	<view class="banner-detail">
		<view class="block" v-if="!showLoading">
			<view class="title">
				{{info.title}}
			</view>
			<view class="cover">
				<u--image :showLoading="true" :src="info.cover" width="100%" height="auto" mode="widthFix"
					@click="click"></u--image>
			</view>
			<u-parse :content="info.content"></u-parse>
			
			<view class="empty" v-if="!info.title">
				<u-empty mode="search" :iconSize="120" text="数据获取失败"></u-empty>
			</view>
		</view>

		<view class="skeleton" v-else>
			<view class="title">
				<view style="width: 300rpx;">
					<u-skeleton rows="0" titleWidth="100%" title :loading="showLoading"></u-skeleton>
					</view>
				</view>
			<view class="cover">
				<u-skeleton avatar avatarSize="360" avatarShape="square" :loading="showLoading"></u-skeleton>
			</view>
			<u-skeleton rows="8" :title="false" :loading="showLoading"></u-skeleton>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {
					title: '',
					cover: '',
					content: '',
				},
				showLoading: false,
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getInfo(this.id);
		},
		onPullDownRefresh() {
			this.getInfo(this.id);
			uni.stopPullDownRefresh();
		},
		methods: {
			async getInfo(id) {
				this.showLoading = true;
				const res = await this.$api(`/study/notice/${id}`, 'get', {
					id
				});
				this.showLoading = false;
				if(res.data) {
					this.info = res.data
				}
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.banner-detail {
		padding: 30rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			font-weight: bold;
			text-align: center;
		}

		.cover {
			margin: 30rpx 0;
		}
	}
</style>